import React from 'react'
import {Button, Card, Modal} from 'antd'
import {Editor} from 'react-draft-wysiwyg'
import draftjs from 'draftjs-to-html'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


export default class RichText extends React.Component {
  state = {
    showRichText: false,
    editorContent: '',
    editorState: '',
  };

  componentDidMount() {
    // document.title = "富文本"
  }

  handleGetText = () => {
    this.setState({
      showRichText: true
    })
  }

  onContentStateChange = (editorContent) => {
    this.setState({
      editorContent,
    });
  }
  handleClearContent = () => {
    this.setState({
      editorState: '',
    })
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  render() {
    const {editorContent, editorState} = this.state;
    return (
      <div>
        <Card style={{marginTop: 10}}>
          <Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
          <Button type="primary" onClick={this.handleGetText}>获取HTML文本</Button>
        </Card>


        <Card title="富文本编辑器">
          <Editor
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            editorState={editorState}
            onContentStateChange={this.onContentStateChange}
            onEditorStateChange={this.onEditorStateChange}
          />
        </Card>


        <Modal
          title="富文本"
          visible={this.state.showRichText}
          onCancel={() => {
            this.setState({
              showRichText: false
            })
          }}
          footer={null}
        >
          {draftjs(editorContent)}
        </Modal>
      </div>
    );
  }
}
